<template>
   <div ref="fallbackAnalysis" class="fallbackAnalysis">

   </div>
</template>
<script>

import { getRetracementAnalysis } from '@/api/analysis.js';
export const labelNameMap = {
   assembly: 'DanTai',
   metricNameOne: 'HSI',
   metricNameTwo: '沪深300',
   metricNameThree: 'MSIC中国'
}
export const labels = ['assembly', 'metricNameOne', 'metricNameTwo', 'metricNameThree']

export default {
   name: '',
   components: {

   },
   mixins: [],
   props: {

   },
   data() {
      return {
         dataMap: {},
         echartData: [],
         uniqueLabels: labels,
         echartData: [],
         labelNameMap,
      }
   },
   computed: {

   },
   watch: {

   },
   mounted() {
      const fundId = this.$route.query.id
      getRetracementAnalysis({
         fundId,
      }).then(res => {
         this.data = res.data;
         this.data.forEach(value => {
            const date = new Date(value.timeValue).toISOString().substr(0, 10);
            this.dataMap[date] = {
               ...value,
               assembly: ((value.assembly || 0) * 100).toFixed(2),
               metricNameOne: ((value.metricNameOne || 0) * 100).toFixed(2),
               metricNameTwo: ((value.metricNameTwo || 0) * 100).toFixed(2),
               metricNameThree: ((value.metricNameThree || 0) * 100).toFixed(2),
            };
         });
         this.render()

      })

   },
   methods: {
      render() {
         let chartInstance = this.$echarts.init(this.$refs.fallbackAnalysis);
         const xKeys = Object.keys(this.dataMap).sort()
         xKeys.forEach(key => {
            this.uniqueLabels.forEach((label, index) => {
               const targetValue = this.dataMap[key];
               if (targetValue) {
                  if (!this.echartData[index]) {
                     console.log('this.labelNameMap[label]', this.labelNameMap[label])
                     this.echartData[index] = {
                        name: this.labelNameMap[label],
                        data: [targetValue[label]],
                        type: 'bar',
                        stack: 'one',
                     emphasis: emphasisStyle,

                     };
                  } else {
                     this.echartData[index].data.push(targetValue[label])
                  }
               }
            })
         })

         const legend = this.uniqueLabels.map(val => this.labelNameMap[val])

         console.log('legend', legend);
         console.log('xKeys',xKeys)
         console.log('echartData',this.echartData)
         var emphasisStyle = {
            itemStyle: {
               shadowBlur: 10,
               shadowColor: 'rgba(0,0,0,0.3)'
            }
         };
         let option = {
            legend: {
               data: legend,
               left: '10%'
            },
            tooltip: {},
            xAxis: {
               data: xKeys,
               name: 'X Axis',
               axisLine: { onZero: true },
               splitLine: { show: false },
               splitArea: { show: false }
            },
            yAxis: {},
            grid: {
               bottom: 100
            },
            series: this.echartData
         };
         chartInstance.setOption(option);
      }
   }
};
</script>
<style lang='' scoped>
.fallbackAnalysis{
   width: 100%;
   height: 400px;
}
</style>